import React, { FC, useContext, useState } from "react"
import Box from "../Box"
import { GlobalContext } from "../config/globalContext"
import Icon from "../Icon"
import Mask from "../Mask"
import { ClassNameType, getClassNames } from "../utils/tools"
import { ImagePreviewPropsType } from "./interface"

const ImagePreview: FC<ImagePreviewPropsType> = (props, ref) => {
  const {
    classNamePrefix
  } = useContext(GlobalContext);

  const prefixCls = `${classNamePrefix}-imagePreview`
  const [height, setHeight] = useState(100);

  const {
    imgAttributes,
    close,
  } = props

  const classNamesObj = {
    imagePreview: (classNames: ClassNameType[] = []) => getClassNames([
      `${prefixCls}`,
      ...classNames
    ]),
    main: (classNames: ClassNameType[] = []) => getClassNames([
      `${prefixCls}-main`,
      ...classNames
    ]),
    imgContent: getClassNames([
      `${prefixCls}-imgContent`,
    ]),
    options: () => getClassNames([
      `${prefixCls}-options`,
    ]),
    icon: (classNames: ClassNameType[] = []) => getClassNames([
      `${prefixCls}-icon`,
      ...classNames
    ]),
    img: (classNames: ClassNameType[] = []) => getClassNames([
      `${prefixCls}-img`,
      ...classNames
    ])
  }

  /**
   * 放大
   */
  const enlarge = () => {
    setHeight(height + 10)
  }

  /**
   * 缩小
   */
  const narrow = () => {
    if (height > 100) {
      setHeight(height - 10)
    }
  }

  return (
    <div className={classNamesObj.imagePreview()}>
      <Mask size={0.7} zIndex='unset' />
      <div className={classNamesObj.main()}>
        <div className={classNamesObj.imgContent}>
          <img
            style={{
              height: `${height}%`,
            }}
            className={classNamesObj.img()}
            {...imgAttributes}
          ></img>
        </div>
        <Box type="blur" className={classNamesObj.options()}>
          <Icon
            onClick={() => close()}
            className={classNamesObj.icon()}
            icon="xmark"
            size={26}
          />
          <div className="flex flex-column align-center gap20">
            <Icon
              onClick={() => enlarge()}
              className={classNamesObj.icon()}
              icon="magnifying-glass-plus"
              size={26}
            />
            <div>
              {`${height}%`}
            </div>
            <Icon
              onClick={() => narrow()}
              className={classNamesObj.icon()}
              icon="magnifying-glass-minus"
              size={26}
            />
          </div>
        </Box>
      </div>
    </div>
  )
}
export default ImagePreview